<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>京东商城</title>
    <link rel="icon" href="favicon.ico" />
    <link rel="stylesheet" href="lib/fa/css/font-awesome.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div class="jd_container">
      <div class="jd_header">
        <a href="#" class="icon_left"><i class="fa fa-home"></i></a>
        <div class="title">京东商城</div>
        <a href="#" class="icon_right"><i class="fa fa-search"></i></a>
      </div>
      <div class="jd_main">
        <!-- 轮播图 -->
        <div class="jd_banner">
          <ul>
            <li>
              <a href="#"><img src="./images/banner01.jpg" alt=""/></a>
            </li>
          </ul>
        </div>

        <!-- 京东导航 -->
        <div class="jd_nav">
          <ul class="clearfix">
            <li>
              <a href="#">
                <img src="images/nav01.png" alt="" />
                <p>京东超市</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/nav02.png" alt="" />
                <p>全球购</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/nav03.png" alt="" />
                <p>服装城</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/nav04.png" alt="" />
                <p>京东生鲜</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/nav05.png" alt="" />
                <p>京东到家</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/nav06.png" alt="" />
                <p>充值中心</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/nav07.png" alt="" />
                <p>京东金融</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/nav08.png" alt="" />
                <p>领券</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/nav09.png" alt="" />
                <p>物流查询</p>
              </a>
            </li>
            <li>
              <a href="#">
                <img src="images/nav10.png" alt="" />
                <p>我的关注</p>
              </a>
            </li>
          </ul>
        </div>

        <!-- 京东楼层 -->
        <div class="jd_floor">
          <div class="jd_floor_item">
            <div class="floor_title">
              <img src="images/item01.jpg" alt="" />
            </div>
            <div class="floor-content">
              <div class="item">
                <p class="tit">优享免息</p>
                <!--  -->
                <p class="info">分期免息费</p>
                <!--  -->
                <img src="images/floor1.jpg" alt="" />
              </div>
              <div class="item">
                <p class="tit">品牌秒杀</p>
                <!--  -->
                <p class="info">低价抢大牌</p>
                <!--  -->
                <img src="images/floor2.jpg" alt="" />
              </div>
              <div class="item">
                <p class="tit">闪购</p>
                <!--  -->
                <p class="info">大牌限时特卖</p>
                <!--  -->
                <img src="images/floor3.jpg" alt="" />
              </div>
              <div class="item">
                <p class="tit">拍拍二手</p>
                <!--  -->
                <p class="info">phone 5折起</p>
                <!--  -->
                <img src="images/floor4.jpg" alt="" />
              </div>
            </div>
          </div>
          <div class="jd_floor_item">
            <div class="floor_title">
              <img src="images/item02.jpg" alt="" />
            </div>
            <div class="floor-content">
              <div class="item">
                <p class="tit">优享免息</p>
                <!--  -->
                <p class="info">分期免息费</p>
                <!--  -->
                <img src="images/floor1.jpg" alt="" />
              </div>
              <div class="item">
                <p class="tit">品牌秒杀</p>
                <!--  -->
                <p class="info">低价抢大牌</p>
                <!--  -->
                <img src="images/floor2.jpg" alt="" />
              </div>
              <div class="item">
                <p class="tit">闪购</p>
                <!--  -->
                <p class="info">大牌限时特卖</p>
                <!--  -->
                <img src="images/floor3.jpg" alt="" />
              </div>
              <div class="item">
                <p class="tit">拍拍二手</p>
                <!--  -->
                <p class="info">phone 5折起</p>
                <!--  -->
                <img src="images/floor4.jpg" alt="" />
              </div>
            </div>
          </div>
          <div class="jd_floor_item">
            <div class="floor_title">
              <img src="images/item03.jpg" alt="" />
            </div>
            <div class="floor-content">
              <div class="item">
                <p class="tit">优享免息</p>
                <!--  -->
                <p class="info">分期免息费</p>
                <!--  -->
                <img src="images/floor1.jpg" alt="" />
              </div>
              <div class="item">
                <p class="tit">品牌秒杀</p>
                <!--  -->
                <p class="info">低价抢大牌</p>
                <!--  -->
                <img src="images/floor2.jpg" alt="" />
              </div>
              <div class="item">
                <p class="tit">闪购</p>
                <!--  -->
                <p class="info">大牌限时特卖</p>
                <!--  -->
                <img src="images/floor3.jpg" alt="" />
              </div>
              <div class="item">
                <p class="tit">拍拍二手</p>
                <!--  -->
                <p class="info">phone 5折起</p>
                <!--  -->
                <img src="images/floor4.jpg" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="jd_footer">
        <ul>
          <li class="now">
            <a href="#">
              <i class="fa fa-home"></i>
              <p>首页</p>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-bars"></i>
              <p>分类</p>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-shopping-cart"></i>
              <p>购物车</p>
            </a>
          </li>
          <li>
            <a href="#">
              <i class="fa fa-user"></i>
              <p>会员中心</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
